<template>
	<router-view />
</template>

<script setup lang="ts" name="app">
import { computed, onBeforeMount, onMounted, nextTick } from 'vue';
import { useThemeConfig } from './store/themeConfig';
import { Local } from '@/utils/storage';
import { storeToRefs } from 'pinia';
import { useChangeColor } from '@/utils/theme';
import { ElMessage } from 'element-plus';

const { getLightColor, getDarkColor } = useChangeColor();

// 引入组件

// 定义变量内容
const storesThemeConfig = useThemeConfig();

const { themeConfig } = storeToRefs(storesThemeConfig);


// 设置初始化，防止刷新时恢复默认
onBeforeMount(() => {

});
// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
// 页面加载时
onMounted(() => {
	nextTick(() => {
		// 设置全局主题
		onColorPickerChange();

		// 获取缓存中的布局配置
		if (Local.get('themeConfig')) {
			storesThemeConfig.setThemeConfig({ themeConfig: Local.get('themeConfig') });
			setTimeout(() => {
				document.documentElement.style.cssText = Local.get('themeConfigStyle');
			}, 200);
		}

	});
});
// 1、全局主题
const onColorPickerChange = () => {
	if (!getThemeConfig.value.primary) return ElMessage.warning('全局主题 primary 颜色值不能为空');
	// 颜色加深
	document.documentElement.style.setProperty('--el-color-primary-dark-2', `${getDarkColor(getThemeConfig.value.primary, 0.1)}`);
	document.documentElement.style.setProperty('--el-color-primary', getThemeConfig.value.primary);
	// 颜色变浅
	for (let i = 1; i <= 9; i++) {
		document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(getThemeConfig.value.primary, i / 10)}`);
	}
	setLocalThemeConfigStyle();
};

// 存储布局配置全局主题样式（html根标签）
const setLocalThemeConfigStyle = () => {
	Local.set('themeConfigStyle', document.documentElement.style.cssText);
};

</script>
